html,
body {
	width: 100%;
}

body {
	font-size: 40px;
	font-family: 'Bungee Shade', cursive;
	color: #222;
	background: #222;
}

.box {
	position: relative;
	overflow: hidden;
	cursor: pointer;
	float: left;
}

.box:hover .border {
	-webkit-transform: scale(0.94);
	transform: scale(0.94);
	-webkit-transition-duration: 140ms;
	transition-duration: 140ms;
}

.box:hover .text {
	opacity: 1;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-transition-duration: 140ms;
	transition-duration: 140ms;
}

.box:hover .image-wrap {
	-webkit-transform: scale(1);
	transform: scale(1);
	opacity: 1;
	-webkit-transition-duration: 140ms;
	transition-duration: 140ms;
}

.border,
.text,
.image {
	width: 100%;
	height: 100%;
	position: absolute;
	pointer-events: none;
}

.image-wrap {
	position: absolute;
	width: 130%;
	height: 130%;
	left: -15%;
	top: -15%;
	-webkit-transform: scale(0.8);
	transform: scale(0.8);
	-webkit-transition: 280ms ease-out;
	transition: 280ms ease-out;
	pointer-events: none;
	opacity: 0.74;
}

.border {
	left: -30px;
	top: -30px;
	border: 30px solid #222;
	box-sizing: content-box;
	-webkit-transition: 360ms ease-in-out;
	transition: 360ms ease-in-out;
}

.text {
	display: -webkit-box;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
	opacity: 0;
	-webkit-transform: translate3d(0, -4%, 0);
	transform: translate3d(0, -4%, 0);
	-webkit-transition: 280ms ease-out;
	transition: 280ms ease-out;
	text-align: center;
}

.image {
	background-size: cover;
}

/* box sizing */
.box {
	width: 100%;
	height: 100vw;
	float: left;
}

@media (min-width: 500px) {
	.box {
		width: 50%;
		height: 50vw;
	}
}

@media (min-width: 800px) {
	.box {
		width: 33.333333%;
		height: 33.33333vw;
	}
}

@media (min-width: 1200px) {
	.box {
		width: 25%;
		height: 25vw;
	}
}

/* image backgrounds */
.image-0 {
	background: url(http://www.dmoe.cc/random.php);
	background-size: contain;
	background-position: center;
}

.image-1 {
	background: url(https://api.ixiaowai.cn/api/api.php);
	background-size: contain;
	background-position: center;
}

.image-2 {
	background: url(https://img.xjh.me/random_img.php?return=302&type=bg&ctype=acg);
	background-size: contain;
	background-position: center;
}

.image-3 {
	background: url(https://api.btstu.cn/sjbz/api.php?lx=dongman&format=images);
	background-size: contain;
	background-position: center;
}

.image-4 {
	background: url(http://api.mtyqx.cn/tapi/random.php);
	background-size: contain;
	background-position: center;
}

.image-5 {
	background: url(https://api.ixiaowai.cn/api/api.php);
	background-size: contain;
	background-position: center;
}

.image-6 {
	background: url(https://api.yimian.xyz/img?type=moe&size=1920x1080);
	background-size: contain;
	background-position: center;
}

.image-7 {
	background: url(https://img.paulzzh.tech/touhou/random);
	background-size: contain;
	background-position: center;
}

.image-8 {
	background: url(https://api.iculture.cc/api/img/acg.php);
	background-size: contain;
	background-position: center;
}

.image-9 {
	background: url(https://imgapi.xl0408.top/);
	background-size: contain;
	background-position: center;
}

.image-10 {
	background: url(http://api.btstu.cn/sjbz/?lx=dongman);
	background-size: contain;
	background-position: center;
}

.image-11 {
	background: url(https://service-5z0sdahv-1306777571.sh.apigw.tencentcs.com/release/);
	background-size: contain;
	background-position: center;
}
